import { component$, type PropsOf } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
import { LuLink2 } from '@qwikest/icons/lucide';

interface LogoProps extends PropsOf<'svg'> {
  fillColor?: string;
  strokeColor?: string;
}

export const MainLogo = component$<LogoProps>(({ ...props }) => {
  return (
    <svg
      {...props}
      class={cn('w-10 h-10', props.class)}
      aria-hidden="true"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 23 22"
    >
      <path
        d="M2.1541 15.783C2.31399 16.643 2.47534 17.406 2.69073 18.0403C2.92701 18.738 3.37425 19.7456 4.48401 20.4588C5.59502 21.1718 6.78195 21.2099 7.577 21.174C8.45063 21.1345 9.46743 20.9633 10.6442 20.7652L14.6861 20.0846C15.8629 19.8865 16.8797 19.7153 17.712 19.4676C18.4717 19.2416 19.5746 18.8205 20.3593 17.7859C21.1458 16.7534 21.1983 15.6592 21.1712 14.9263C21.1469 14.2574 21.0177 13.4927 20.8614 12.6308L20.8592 12.6193L20.8571 12.6077L20.7634 12.1035L19.9617 7.79201L19.868 7.28784L19.8658 7.27625L19.8637 7.26466C19.7038 6.40467 19.5424 5.64172 19.327 5.00742C19.0908 4.30968 18.6435 3.30206 17.5338 2.58885C16.4227 1.87585 15.2358 1.83781 14.4408 1.87366C13.5671 1.91318 12.5503 2.08438 11.3735 2.28252L7.33168 2.96306C6.15489 3.1612 5.13809 3.3324 4.30576 3.58012C3.54603 3.80605 2.4432 4.2272 1.65842 5.26181C0.871947 6.2943 0.819419 7.38849 0.846517 8.12141C0.870824 8.79027 1.00002 9.55503 1.15636 10.4168L1.15851 10.4284L1.16067 10.44L1.25441 10.9442L2.05605 15.2557L2.14979 15.7598L2.15194 15.7714L2.1541 15.783ZM9.7107 9.90879L10.3727 13.4693L3.92173 14.5555L3.25973 10.995L9.7107 9.90879ZM18.759 12.0573L12.308 13.1435L11.646 9.58294L18.097 8.49678L18.759 12.0573ZM7.50756 19.3676C6.67238 19.4042 6.10837 19.2852 5.62149 18.9728C5.13458 18.6603 4.81854 18.2115 4.56995 17.4824C4.45979 17.1555 4.3605 16.7682 4.26982 16.3364L10.7082 15.2523L11.3702 18.8128L10.3182 18.99C9.21192 19.1762 8.25437 19.3375 7.51204 19.3704L7.50756 19.3676ZM18.7554 16.7614C18.4076 17.218 17.9201 17.5104 17.1262 17.7481C16.4171 17.9595 15.462 18.1203 14.3533 18.307L13.3012 18.4841L12.6392 14.9236L19.0776 13.8396C19.146 14.2775 19.1958 14.6707 19.2089 15.014C19.2383 15.78 19.1026 16.3013 18.7586 16.7572L18.7554 16.7614ZM14.512 3.68785C15.3472 3.65122 15.9112 3.77023 16.3981 4.08269C16.8894 4.398 17.2048 4.84334 17.4496 5.57308C17.5598 5.89998 17.6591 6.28727 17.7497 6.71906L11.3114 7.80311L10.6493 4.24259L11.7014 4.06546C12.8076 3.87919 13.7652 3.71797 14.5075 3.68502L14.512 3.68785ZM3.26414 6.29407C3.61195 5.83747 4.09943 5.54502 4.89334 5.30737C5.60248 5.09593 6.55752 4.93513 7.66628 4.74844L8.71834 4.57131L9.38034 8.13182L2.94195 9.21587C2.87352 8.77794 2.8238 8.38472 2.81065 8.04146C2.78063 7.27198 2.9163 6.75066 3.26096 6.2982L3.26414 6.29407Z"
        fill="#FF9D00"
      />
      <path
        d="M2.1541 15.783C2.31399 16.643 2.47534 17.406 2.69073 18.0403C2.92701 18.738 3.37425 19.7456 4.48401 20.4588C5.59502 21.1718 6.78195 21.2099 7.577 21.174C8.45063 21.1345 9.46743 20.9633 10.6442 20.7652L14.6861 20.0846C15.8629 19.8865 16.8797 19.7153 17.712 19.4676C18.4717 19.2416 19.5746 18.8205 20.3593 17.7859C21.1458 16.7534 21.1983 15.6592 21.1712 14.9263C21.1469 14.2574 21.0177 13.4927 20.8614 12.6308L20.8592 12.6193L20.8571 12.6077L20.7634 12.1035L19.9617 7.79201L19.868 7.28784L19.8658 7.27625L19.8637 7.26466C19.7038 6.40467 19.5424 5.64172 19.327 5.00742C19.0908 4.30968 18.6435 3.30206 17.5338 2.58885C16.4227 1.87585 15.2358 1.83781 14.4408 1.87366C13.5671 1.91318 12.5503 2.08438 11.3735 2.28252L7.33168 2.96306C6.15489 3.1612 5.13809 3.3324 4.30576 3.58012C3.54603 3.80605 2.4432 4.2272 1.65842 5.26181C0.871947 6.2943 0.819419 7.38849 0.846517 8.12141C0.870824 8.79027 1.00002 9.55503 1.15636 10.4168L1.15851 10.4284L1.16067 10.44L1.25441 10.9442L2.05605 15.2557L2.14979 15.7598L2.15194 15.7714L2.1541 15.783ZM9.7107 9.90879L10.3727 13.4693L3.92173 14.5555L3.25973 10.995L9.7107 9.90879ZM18.759 12.0573L12.308 13.1435L11.646 9.58294L18.097 8.49678L18.759 12.0573ZM7.50756 19.3676C6.67238 19.4042 6.10837 19.2852 5.62149 18.9728C5.13458 18.6603 4.81854 18.2115 4.56995 17.4824C4.45979 17.1555 4.3605 16.7682 4.26982 16.3364L10.7082 15.2523L11.3702 18.8128L10.3182 18.99C9.21192 19.1762 8.25437 19.3375 7.51204 19.3704L7.50756 19.3676ZM18.7554 16.7614C18.4076 17.218 17.9201 17.5104 17.1262 17.7481C16.4171 17.9595 15.462 18.1203 14.3533 18.307L13.3012 18.4841L12.6392 14.9236L19.0776 13.8396C19.146 14.2775 19.1958 14.6707 19.2089 15.014C19.2383 15.78 19.1026 16.3013 18.7586 16.7572L18.7554 16.7614ZM14.512 3.68785C15.3472 3.65122 15.9112 3.77023 16.3981 4.08269C16.8894 4.398 17.2048 4.84334 17.4496 5.57308C17.5598 5.89998 17.6591 6.28727 17.7497 6.71906L11.3114 7.80311L10.6493 4.24259L11.7014 4.06546C12.8076 3.87919 13.7652 3.71797 14.5075 3.68502L14.512 3.68785ZM3.26414 6.29407C3.61195 5.83747 4.09943 5.54502 4.89334 5.30737C5.60248 5.09593 6.55752 4.93513 7.66628 4.74844L8.71834 4.57131L9.38034 8.13182L2.94195 9.21587C2.87352 8.77794 2.8238 8.38472 2.81065 8.04146C2.78063 7.27198 2.9163 6.75066 3.26096 6.2982L3.26414 6.29407Z"
        fill="#FF9D00"
      />
      <path
        d="M2.72538 14.7354C2.88528 15.5954 3.04663 16.3584 3.26202 16.9926C3.4983 17.6904 3.94554 18.698 5.05529 19.4112C6.16631 20.1242 7.35324 20.1623 8.14829 20.1264C9.02192 20.0869 10.0387 19.9157 11.2155 19.7175L15.2574 19.037C16.4342 18.8389 17.451 18.6677 18.2833 18.42C19.043 18.194 20.1458 17.7729 20.9306 16.7383C21.7171 15.7058 21.7696 14.6116 21.7425 13.8787C21.7182 13.2098 21.589 12.445 21.4327 11.5832L21.4305 11.5716L21.4284 11.5601L21.3346 11.0559L20.533 6.7444L20.4393 6.24023L20.4371 6.22864L20.435 6.21705C20.2751 5.35706 20.1137 4.59411 19.8983 3.95981C19.662 3.26208 19.2148 2.25445 18.105 1.54124C16.994 0.82824 15.8071 0.790204 15.0121 0.826056C14.1384 0.865575 13.1216 1.03678 11.9448 1.23491L7.90297 1.91545C6.72618 2.11359 5.70938 2.28479 4.87705 2.53251C4.11732 2.75844 3.01449 3.17959 2.22971 4.21421C1.44324 5.24669 1.39071 6.34088 1.41781 7.0738C1.44211 7.74266 1.57131 8.50742 1.72765 9.36923L1.7298 9.38082L1.73196 9.39241L1.8257 9.89657L2.62733 14.2081L2.72107 14.7122L2.72323 14.7238L2.72538 14.7354ZM10.282 8.86118L10.944 12.4217L4.49302 13.5079L3.83102 9.94735L10.282 8.86118ZM19.3303 11.0097L12.8793 12.0959L12.2173 8.53533L18.6683 7.44917L19.3303 11.0097Z"
        fill="#FFD21E"
      />
    </svg>
  );
});

export const SecondLogo = component$<LogoProps>(
  ({
    fillColor = 'hsl(var(--muted-foreground))',
    strokeColor = 'transparent',
    ...props
  }) => {
    return (
      <svg
        {...props}
        class={cn('w-10 h-10', props.class)}
        aria-hidden="true"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
      >
        <path
          d="M1.81414 13.0408C1.9488 13.8019 2.08468 14.4771 2.26608 15.0385C2.46507 15.656 2.84173 16.5477 3.77634 17.1789C4.71202 17.8099 5.71163 17.8436 6.3812 17.8119C7.11696 17.7769 7.97329 17.6254 8.96435 17.45L12.3683 16.8477C13.3594 16.6724 14.2157 16.5209 14.9167 16.3016C15.5565 16.1017 16.4853 15.729 17.1462 14.8133C17.8086 13.8996 17.8528 12.9312 17.83 12.2826C17.8095 11.6906 17.7007 11.0138 17.5691 10.2511L17.5672 10.2409L17.5654 10.2306L17.4865 9.78442L16.8114 5.96874L16.7324 5.52255L16.7306 5.51229L16.7288 5.50203C16.5941 4.74094 16.4582 4.06573 16.2768 3.50437C16.0779 2.88687 15.7012 1.99512 14.7666 1.36393C13.8309 0.73292 12.8313 0.699257 12.1617 0.730987C11.426 0.765961 10.5696 0.917475 9.57857 1.09283L6.1746 1.6951C5.18353 1.87046 4.3272 2.02197 3.62623 2.2412C2.98639 2.44115 2.05762 2.81387 1.39669 3.72951C0.734336 4.64326 0.690098 5.61162 0.71292 6.26026C0.733391 6.85221 0.842199 7.52902 0.973863 8.29172L0.975678 8.30198L0.977493 8.31223L1.05644 8.75842L1.73156 12.5741L1.81051 13.0203L1.81232 13.0306L1.81414 13.0408ZM8.17816 7.8421L8.73569 10.9932L3.30281 11.9544L2.74528 8.80336L8.17816 7.8421ZM15.7984 9.74353L10.3656 10.7048L9.80803 7.55372L15.2409 6.59246L15.7984 9.74353ZM6.32272 16.2132C5.61934 16.2456 5.14435 16.1403 4.73431 15.8637C4.32424 15.5872 4.05808 15.19 3.84872 14.5447C3.75595 14.2554 3.67232 13.9127 3.59596 13.5305L9.01824 12.5711L9.57577 15.7222L8.68975 15.879C7.75809 16.0438 6.95166 16.1865 6.32649 16.2157L6.32272 16.2132ZM15.7954 13.9066C15.5025 14.3107 15.092 14.5696 14.4234 14.7799C13.8261 14.967 13.0218 15.1093 12.0881 15.2745L11.202 15.4313L10.6445 12.2802L16.0668 11.3208C16.1244 11.7084 16.1663 12.0564 16.1774 12.3602C16.2021 13.0381 16.0878 13.4995 15.7981 13.903L15.7954 13.9066ZM12.2217 2.33655C12.9251 2.30413 13.4001 2.40945 13.8101 2.68598C14.2239 2.96503 14.4895 3.35916 14.6957 4.00498C14.7885 4.29429 14.8721 4.63704 14.9485 5.01918L9.5262 5.97857L8.96867 2.8275L9.85469 2.67073C10.7863 2.50589 11.5928 2.3632 12.218 2.33404L12.2217 2.33655ZM2.749 4.64306C3.04192 4.23897 3.45246 3.98015 4.12108 3.76983C4.7183 3.5827 5.52261 3.44039 6.45639 3.27518L7.34241 3.11841L7.89994 6.26948L2.47765 7.22886C2.42002 6.84129 2.37815 6.49329 2.36707 6.18951C2.34179 5.50851 2.45605 5.04714 2.74632 4.64671L2.749 4.64306Z"
          fill={fillColor}
          stroke={strokeColor}
        />
      </svg>
    );
  },
);

export const HFLogo = component$<LogoProps>(({ ...props }) => {
  return (
    <svg
      {...props}
      class={cn('w-10 h-10', props.class)}
      style={{
        transform: 'scale(1.4)',
      }}
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <g id="huggingface-color 1">
        <g id="Group">
          <path
            id="Vector"
            d="M1.5 7.68998C1.5 5.41865 2.73133 3.32065 4.72933 2.18465C5.71398 1.62651 6.8265 1.33313 7.95833 1.33313C9.09017 1.33313 10.2027 1.62651 11.1873 2.18465C13.1853 3.32065 14.4167 5.41865 14.4167 7.68998C14.4167 11.2007 11.5253 14.0467 7.95867 14.0467C4.392 14.0467 1.5 11.2 1.5 7.68998Z"
            fill="#FF9D0B"
          />
          <path
            id="Vector_2"
            d="M7.95875 13.3907C11.1567 13.3907 13.7501 10.838 13.7501 7.68999C13.7501 4.54199 11.1567 1.98999 7.95875 1.98999C4.76008 1.98999 2.16675 4.54199 2.16675 7.68999C2.16675 10.838 4.76008 13.39 7.95875 13.39V13.3907Z"
            fill="#FFD21E"
          />
          <path
            id="Vector_3"
            d="M7.91686 10.0753C9.55486 10.0753 10.0835 8.638 10.0835 7.9C10.0835 7.516 9.82153 7.63733 9.40153 7.84066C9.01353 8.02933 8.49153 8.29066 7.91886 8.29066C6.7202 8.29066 5.7522 7.162 5.7522 7.9C5.7522 8.638 6.27886 10.0753 7.91886 10.0753H7.91686Z"
            fill="#FF323D"
          />
          <path
            id="Vector_4"
            d="M9.8401 6.13996C10.0534 6.21196 10.1368 6.64196 10.3514 6.52996C10.6494 6.37463 10.8228 6.05796 10.7908 5.72729C10.7742 5.56475 10.7096 5.41082 10.6052 5.2851C10.5009 5.15938 10.3615 5.06755 10.2048 5.02129C10.0475 4.97369 9.87968 4.9732 9.72211 5.01988C9.56454 5.06656 9.42409 5.15837 9.3181 5.28396C9.10344 5.53996 9.06677 5.89729 9.22477 6.19063C9.32677 6.37929 9.6501 6.07263 9.84143 6.13796L9.8401 6.13996ZM5.91544 6.13996C5.7021 6.21196 5.61677 6.64196 5.40343 6.52996C5.25862 6.45516 5.13947 6.33877 5.0613 6.19574C4.98313 6.05271 4.94952 5.88957 4.96477 5.72729C4.99677 5.39729 5.2281 5.11863 5.5501 5.02129C5.7074 4.97369 5.87519 4.9732 6.03276 5.01988C6.19033 5.06656 6.33078 5.15837 6.43677 5.28396C6.65143 5.53996 6.6881 5.89729 6.5301 6.19063C6.42877 6.37929 6.10343 6.07263 5.91343 6.13796L5.91544 6.13996ZM6.6621 9.69996C6.75094 9.52308 6.8752 9.36635 7.02716 9.23951C7.17911 9.11267 7.35552 9.01842 7.54543 8.96263C7.5921 8.94929 7.64143 9.00263 7.69143 9.07663L7.81943 9.28063C7.86543 9.34729 7.9121 9.39729 7.95877 9.39729C8.0081 9.39729 8.05877 9.34796 8.10743 9.28263L8.2441 9.08129C8.29744 9.00796 8.34877 8.95596 8.4001 8.97129C8.7581 9.08329 9.05744 9.32863 9.23344 9.65529C9.85477 9.17263 10.0834 8.38529 10.0834 7.89996C10.0834 7.56129 9.87943 7.61596 9.54343 7.77329L9.13277 7.97063C8.7861 8.13063 8.36743 8.29063 7.91677 8.29063C7.4661 8.29063 7.04877 8.13063 6.70143 7.97063L6.30877 7.78196C5.9621 7.61663 5.7501 7.55396 5.7501 7.89996C5.7501 8.36863 5.96344 9.12063 6.54144 9.60663L6.66143 9.69996H6.6621Z"
            fill="#3A3B45"
          />
          <path
            id="Vector_5"
            d="M11.8748 6.91068C11.9454 6.9113 12.0155 6.89798 12.0809 6.87151C12.1464 6.84503 12.206 6.8059 12.2563 6.75637C12.3067 6.70684 12.3468 6.64787 12.3743 6.58283C12.4018 6.51779 12.4163 6.44797 12.4168 6.37735C12.4168 6.08335 12.1741 5.84401 11.8748 5.84401C11.8042 5.84349 11.7342 5.85686 11.6688 5.88338C11.6035 5.9099 11.5439 5.94904 11.4937 5.99856C11.4434 6.04809 11.4034 6.10703 11.3759 6.17202C11.3484 6.23701 11.334 6.30678 11.3334 6.37735C11.3334 6.67201 11.5761 6.91068 11.8748 6.91068ZM4.12545 6.91068C4.19601 6.91121 4.26599 6.89783 4.33138 6.87131C4.39678 6.8448 4.45631 6.80566 4.50658 6.75613C4.55684 6.70661 4.59686 6.64767 4.62435 6.58267C4.65184 6.51768 4.66626 6.44791 4.66678 6.37735C4.66678 6.08335 4.42411 5.84401 4.12545 5.84401C4.05483 5.8434 3.98478 5.85671 3.91931 5.88319C3.85384 5.90967 3.79423 5.94879 3.74389 5.99833C3.69355 6.04786 3.65347 6.10683 3.62594 6.17187C3.59841 6.2369 3.58397 6.30673 3.58345 6.37735C3.58345 6.67201 3.82611 6.91068 4.12545 6.91068ZM3.01011 8.71535C2.74011 8.71535 2.50011 8.82335 2.33211 9.02201C2.18881 9.19559 2.11032 9.41359 2.11011 9.63868C2.00509 9.60757 1.8963 9.59097 1.78678 9.58935C1.52878 9.58935 1.29545 9.68668 1.13011 9.86201C0.98322 10.0112 0.890331 10.2051 0.866177 10.4131C0.842024 10.6211 0.887988 10.8311 0.996781 11.01C0.849893 11.1278 0.7453 11.2902 0.698781 11.4727C0.658781 11.6207 0.618781 11.9327 0.832114 12.25C0.752068 12.3706 0.704329 12.5096 0.693472 12.6539C0.682616 12.7982 0.709006 12.9429 0.770114 13.074C0.928781 13.4293 1.31011 13.7127 2.03011 14.0107L2.19011 14.0747C2.70211 14.2747 3.17211 14.4027 3.17545 14.404C3.76878 14.566 4.38078 14.654 4.99678 14.6667C5.97345 14.6667 6.67211 14.3713 7.07345 13.7907C7.69345 12.896 7.63478 12.074 6.89078 11.282L6.79011 11.1793C6.32878 10.7233 6.02011 10.0527 5.95678 9.90468C5.82678 9.46801 5.48345 8.98268 4.91545 8.98268C4.60878 8.98735 4.32278 9.13802 4.14878 9.38601C3.98211 9.17935 3.81878 9.01735 3.67211 8.92335C3.47558 8.79276 3.24602 8.72063 3.01011 8.71535ZM12.9901 8.71535C13.2601 8.71535 13.5014 8.82335 13.6681 9.02201C13.8121 9.19668 13.8901 9.41401 13.8901 9.63868C13.9954 9.60735 14.1048 9.59135 14.2148 9.58935C14.4734 9.58935 14.7068 9.68668 14.8714 9.86201C15.0183 10.0112 15.1112 10.2051 15.1354 10.4131C15.1595 10.6211 15.1136 10.8311 15.0048 11.01C15.1514 11.1287 15.2561 11.2913 15.3014 11.4727C15.3414 11.6207 15.3814 11.9327 15.1681 12.25C15.3308 12.4967 15.3541 12.8073 15.2301 13.074C15.0714 13.4293 14.6901 13.7127 13.9708 14.0107L13.8114 14.0747C13.2981 14.2747 12.8281 14.4027 12.8248 14.404C12.2314 14.566 11.6194 14.654 11.0034 14.6667C10.0268 14.6667 9.32811 14.3713 8.92678 13.7907C8.30678 12.896 8.36545 12.074 9.10945 11.282L9.21011 11.1793C9.67345 10.7233 9.98145 10.0527 10.0448 9.90468C10.1748 9.46801 10.5168 8.98268 11.0848 8.98268C11.3914 8.98735 11.6774 9.13802 11.8514 9.38601C12.0181 9.17935 12.1814 9.01735 12.3301 8.92335C12.4928 8.81535 12.6788 8.74668 12.8728 8.72335L12.9901 8.71535Z"
            fill="#FF9D0B"
          />
          <path
            id="Vector_6"
            d="M6.52351 13.4213C6.98218 12.7586 6.94885 12.2613 6.32018 11.6433C5.69018 11.0246 5.32351 10.118 5.32351 10.118C5.32351 10.118 5.18685 9.59263 4.87551 9.64196C4.56351 9.6913 4.33551 10.4753 4.98885 10.956C5.64018 11.4366 4.85885 11.7626 4.60685 11.312C4.35685 10.8606 3.67018 9.7013 3.31351 9.47796C2.95885 9.25663 2.70885 9.3793 2.79218 9.83863C2.87551 10.2966 4.36351 11.4053 4.21885 11.6433C4.07351 11.8846 3.56351 11.3633 3.56351 11.3633C3.56351 11.3633 1.96885 9.9333 1.62018 10.3066C1.27351 10.6786 1.88551 10.9906 2.75351 11.5086C3.62551 12.0273 3.69351 12.1653 3.57018 12.362C3.44551 12.5586 1.52351 10.962 1.34351 11.64C1.16351 12.314 3.30551 12.5093 3.17351 12.9773C3.04018 13.444 1.66351 12.0946 1.38351 12.6193C1.10018 13.146 3.32551 13.7646 3.34351 13.7693C4.06018 13.9533 5.88551 14.342 6.52351 13.4213ZM9.47818 13.4213C9.02018 12.7586 9.05151 12.2613 9.68151 11.6433C10.3102 11.0246 10.6768 10.118 10.6768 10.118C10.6768 10.118 10.8135 9.59263 11.1268 9.64196C11.4368 9.6913 11.6648 10.4753 11.0135 10.956C10.3602 11.4366 11.1435 11.7626 11.3935 11.312C11.6448 10.8606 12.3315 9.7013 12.6868 9.47796C13.0415 9.25663 13.2935 9.3793 13.2082 9.83863C13.1248 10.2966 11.6382 11.4053 11.7835 11.6433C11.9268 11.8846 12.4368 11.3633 12.4368 11.3633C12.4368 11.3633 14.0335 9.9333 14.3802 10.3066C14.7268 10.6786 14.1168 10.9906 13.2468 11.5086C12.3748 12.0273 12.3082 12.1653 12.4302 12.362C12.5548 12.5586 14.4768 10.962 14.6568 11.64C14.8368 12.314 12.6968 12.5093 12.8282 12.9773C12.9615 13.444 14.3368 12.0946 14.6182 12.6193C14.9002 13.146 12.6768 13.7646 12.6582 13.7693C11.9402 13.9533 10.1148 14.342 9.47818 13.4213Z"
            fill="#FFD21E"
          />
        </g>
      </g>
    </svg>
  );
});

export const GoogleDrive = component$<LogoProps>(({ ...props }) => {
  return (
    <svg
      {...props}
      class={cn('w-10 h-10', props.class)}
      style={{
        transform: 'scale(1.4)',
      }}
      width="18"
      height="18"
      viewBox="0 0 18 18"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path d="M1.125 6.72502C1.125 4.76481 1.125 3.78472 1.50648 3.03603C1.84204 2.37747 2.37747 1.84204 3.03603 1.50648C3.78472 1.125 4.76481 1.125 6.72502 1.125H11.275C13.2352 1.125 14.2153 1.125 14.964 1.50648C15.6225 1.84204 16.158 2.37747 16.4935 3.03603C16.875 3.78472 16.875 4.76481 16.875 6.72502V11.275C16.875 13.2352 16.875 14.2153 16.4935 14.964C16.158 15.6225 15.6225 16.158 14.964 16.4935C14.2153 16.875 13.2352 16.875 11.275 16.875H6.72502C4.76481 16.875 3.78472 16.875 3.03603 16.4935C2.37747 16.158 1.84204 15.6225 1.50648 14.964C1.125 14.2153 1.125 13.2352 1.125 11.275V6.72502Z" />
      <path
        d="M9.00107 7.00352L7.05431 3.56792C7.11894 3.50211 7.1933 3.45895 7.26767 3.42993C6.69364 3.61887 6.43022 4.26353 6.43022 4.26353L2.87378 10.5382C2.82374 10.7349 2.80984 10.9125 2.8161 11.0689H6.6978L9.00107 7.00352Z"
        fill="#34A853"
      />
      <path
        d="M9.00122 7.00352L11.3045 11.0689H15.1862C15.1924 10.9125 15.1785 10.7349 15.1285 10.5382L11.5721 4.26353C11.5721 4.26353 11.308 3.61887 10.7346 3.42993C10.8083 3.45895 10.8833 3.50211 10.9479 3.56792L9.00122 7.00352Z"
        fill="#FBBC05"
      />
      <path
        d="M9.00096 7.00391L10.9477 3.56834C10.8831 3.50253 10.808 3.45936 10.7344 3.43035C10.6495 3.40275 10.5585 3.38435 10.4598 3.37939H10.3569H7.64499H7.54211C7.44412 3.38364 7.35238 3.40204 7.26755 3.43035C7.19392 3.45936 7.11883 3.50253 7.0542 3.56834L9.00096 7.00391Z"
        fill="#188038"
      />
      <path
        d="M6.69836 11.069L4.77386 14.4657C4.77386 14.4657 4.70992 14.4345 4.62305 14.3701C4.89619 14.5803 5.16169 14.6249 5.16169 14.6249H12.72C13.137 14.6249 13.2239 14.4657 13.2239 14.4657C13.2253 14.465 13.226 14.4642 13.2274 14.4635L11.3043 11.069H6.69836Z"
        fill="#4285F4"
      />
      <path
        d="M6.69859 11.069H2.81689C2.83636 11.5304 3.03652 11.8 3.03652 11.8L3.18247 12.0533C3.1929 12.0682 3.19916 12.0767 3.19916 12.0767L3.51678 12.6343L4.22987 13.8755C4.25072 13.9257 4.27505 13.9717 4.30076 14.0156C4.31049 14.0305 4.31952 14.0467 4.32995 14.0609C4.33273 14.0651 4.33551 14.0694 4.33829 14.0736C4.42656 14.1982 4.52525 14.2944 4.62394 14.3701C4.71082 14.4353 4.77477 14.4657 4.77477 14.4657L6.69859 11.069Z"
        fill="#1967D2"
      />
      <path
        d="M11.3044 11.069H15.1861C15.1666 11.5304 14.9665 11.8 14.9665 11.8L14.8205 12.0533C14.8101 12.0682 14.8039 12.0767 14.8039 12.0767L14.4862 12.6343L13.7731 13.8755C13.7523 13.9257 13.728 13.9717 13.7023 14.0156C13.6925 14.0305 13.6835 14.0467 13.6731 14.0609C13.6703 14.0651 13.6675 14.0694 13.6647 14.0736C13.5764 14.1982 13.4778 14.2944 13.3791 14.3701C13.2922 14.4353 13.2282 14.4657 13.2282 14.4657L11.3044 11.069Z"
        fill="#EA4335"
      />
    </svg>
  );
});

export const Provider = component$<{
  name: string;
}>(({ name }) => {
  const Component = SUPPORT_PROVIDERS[name as keyof typeof SUPPORT_PROVIDERS];

  if (!Component) {
    return <LuLink2 class="text-indigo-500 w-4 h-4" />;
  }

  return <Component />;
});

const NovitaIcon = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      width="1em"
      height="1em"
      viewBox="0 0 26 26"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      preserveAspectRatio="xMidYMid meet"
      version="1.2"
    >
      <rect
        x="2.43628"
        y="2.43652"
        width="21.1274"
        height="21.1274"
        rx="3.54011"
        fill="black"
      />
      <path
        d="M10.7187 5.79061C10.6923 5.80858 10.6791 6.78313 10.6835 8.13942L10.6923 10.4568C4.90331 16.3759 3.23298 18.105 3.24617 18.1274C3.25496 18.1454 4.93408 18.1589 6.97804 18.1589H10.6923C10.6923 14.5391 10.7055 13.4792 10.7275 13.4703C10.7451 13.4568 11.7956 14.5077 13.066 15.8056L15.3736 18.1589C21.1143 18.1589 22.789 18.1454 22.7978 18.123C22.811 18.105 20.1077 15.3161 16.789 11.9253C13.4703 8.53463 10.7407 5.77265 10.7187 5.79061Z"
        fill="#26D57A"
      />
    </svg>
  );
});

const NebiusIcon = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      width="1em"
      height="1em"
      viewBox="0 0 26 26"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      preserveAspectRatio="xMidYMid meet"
    >
      <rect
        x="3.14136"
        y="2.43652"
        width="21.1274"
        height="21.1274"
        rx="3.54011"
        fill="#D9FE00"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M22 5.2226H19V18.4781C19 18.4781 22 18.2885 22 14.6817V5.2226ZM4 11.3183V20.7701H7V7.5146C7 7.5146 8.80257 7.25164 9.75584 9.56444L13.5339 18.6933C14.1519 20.1708 15.1636 21 16.5923 21C18.021 21 19 19.7855 19 18.4842C19 18.4842 17.1974 18.7471 16.2383 16.4356L12.4661 7.30668C11.8481 5.82923 10.8364 5 9.40771 5C7.97897 5 7 6.21327 7 7.5146C6.99416 7.5146 4 7.71029 4 11.3183Z"
        fill="#002C44"
      />
    </svg>
  );
});

const Cerebras = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
      fill="none"
    >
      <path
        d="M15 22C10.0294 22 6 17.9706 6 13C6 8.02939 10.0294 4 15 4M10.3635 18.5622C7.2966 15.989 6.89677 11.417 9.46998 8.35026C12.0432 5.28338 16.6151 4.88355 19.6819 7.45675M12.4088 17.8643C9.72407 16.447 8.69627 13.1212 10.1136 10.4368C11.5308 7.75157 14.8559 6.72427 17.5411 8.14156M15 16.746C12.9314 16.746 11.2543 15.0689 11.2543 13.0003C11.2543 10.9316 12.9314 9.25454 15 9.25454"
        stroke="#F15A29"
        stroke-width="1.5"
        stroke-miterlimit="10"
      />
    </svg>
  );
});

const Fireworks = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <path
        d="M19.7941 2.5H6.20588C4.15918 2.5 2.5 4.15918 2.5 6.20588V19.7941C2.5 21.8408 4.15918 23.5 6.20588 23.5H19.7941C21.8408 23.5 23.5 21.8408 23.5 19.7941V6.20588C23.5 4.15918 21.8408 2.5 19.7941 2.5Z"
        fill="#5019C5"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M12.9917 14.8005C12.4958 14.8005 12.0508 14.5061 11.861 14.0503L9.57335 8.58789H10.9123L12.9995 13.5848L15.0847 8.58789H16.4237L14.1223 14.0523C13.9316 14.5061 13.4875 14.8005 12.9917 14.8005ZM15.9767 17.4106C15.4828 17.4106 15.0398 17.1181 14.8481 16.6663C14.6554 16.2105 14.7551 15.6902 15.1034 15.3371L19.2699 11.1168L19.7902 12.3442L15.9758 16.2007L21.4128 16.1704L21.9331 17.3979L15.9777 17.4125L15.9758 17.4106H15.9767ZM4.58722 16.1684L4.06689 17.3959L4.06885 17.394L10.0242 17.4076C10.5162 17.4076 10.9612 17.1162 11.1529 16.6633C11.3466 16.2085 11.2458 15.6863 10.8977 15.3342L6.73113 11.1138L6.2108 12.3413L10.0242 16.1988L4.58722 16.1684Z"
        fill="white"
      />
    </svg>
  );
});

const Together = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <g clip-path="url(#clip0_55_1726)">
        <path
          d="M19.925 2.5H6.33674C4.29004 2.5 2.63086 4.15918 2.63086 6.20588V19.7941C2.63086 21.8408 4.29004 23.5 6.33674 23.5H19.925C21.9717 23.5 23.6309 21.8408 23.6309 19.7941V6.20588C23.6309 4.15918 21.9717 2.5 19.925 2.5Z"
          fill="#F1EFED"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M17.6087 12.5368C19.6554 12.5368 21.3146 10.8776 21.3146 8.83088C21.3146 6.78418 19.6554 5.125 17.6087 5.125C15.562 5.125 13.9028 6.78418 13.9028 8.83088C13.9028 10.8776 15.562 12.5368 17.6087 12.5368ZM17.6087 21.1842C19.6554 21.1842 21.3146 19.525 21.3146 17.4783C21.3146 15.4316 19.6554 13.7725 17.6087 13.7725C15.562 13.7725 13.9028 15.4316 13.9028 17.4783C13.9028 19.525 15.562 21.1842 17.6087 21.1842ZM12.6676 17.4783C12.6676 19.525 11.0084 21.1842 8.96174 21.1842C6.91504 21.1842 5.25586 19.525 5.25586 17.4783C5.25586 15.4316 6.91504 13.7725 8.96174 13.7725C11.0084 13.7725 12.6676 15.4316 12.6676 17.4783Z"
          fill="#D3D1D1"
        />
        <path
          d="M8.96174 12.5368C11.0084 12.5368 12.6676 10.8776 12.6676 8.83088C12.6676 6.78418 11.0084 5.125 8.96174 5.125C6.91504 5.125 5.25586 6.78418 5.25586 8.83088C5.25586 10.8776 6.91504 12.5368 8.96174 12.5368Z"
          fill="#0F6FFF"
        />
      </g>
      <defs>
        <clipPath id="clip0_55_1726">
          <rect
            width="21"
            height="21"
            fill="white"
            transform="translate(2.63086 2.5)"
          />
        </clipPath>
      </defs>
    </svg>
  );
});

const Groq = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <rect
        x="2.43628"
        y="2.43652"
        width="21.1274"
        height="21.1274"
        rx="3.54011"
        fill="#000"
      />
      <path
        d="M13.024 6.00018C10.2759 5.97721 8.02405 8.10452 8.00019 10.751C7.97634 13.3975 10.1853 15.5662 12.9333 15.5892H14.6604V13.7927H13.024C11.3064 13.811 9.89424 12.4878 9.87516 10.8291C9.85607 9.17047 11.2301 7.81506 12.9524 7.79668C12.9762 7.79668 13.0001 7.79668 13.024 7.79668C14.7415 7.79668 16.1346 9.13831 16.1441 10.7924V15.2078C16.1441 16.8481 14.7558 18.1851 13.0573 18.2035C12.2415 18.1989 11.4639 17.8819 10.8914 17.3259L9.56982 18.5986C10.4858 19.4854 11.7263 19.9908 13.024 20H13.0907C15.8054 19.9632 17.9857 17.8405 18 15.2262V10.6729C17.9332 8.07695 15.7243 6.00478 13.024 6.00018Z"
        fill="white"
      />
    </svg>
  );
});

const Hyperbolic = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <path
        d="M3.4211 4.72C3.66077 4.42 4.22 3.9 4.65939 3.58C5.09879 3.26 5.71793 3 6.03749 3C6.397 3 6.69659 3.16 6.87634 3.46C7.03612 3.7 7.67524 5.14 8.27442 6.64C8.89356 8.16 9.39287 9.58 9.39287 9.8C9.39287 10.18 9.35293 10.2 8.15458 9.9C7.45554 9.72 6.35705 9.34 5.69796 9.02C5.03887 8.7 4.16008 8.06 3.76063 7.62C3.16145 6.98 3.00167 6.64 3.00167 6.06C2.9817 5.58 3.14148 5.1 3.4211 4.72Z"
        fill="#594CE9"
      />
      <path
        d="M17.7813 6.4C18.3406 5.02 18.9397 3.7 19.0995 3.46C19.2793 3.16 19.5988 3 19.9384 3C20.2379 3 20.8371 3.24 21.2765 3.56C21.7159 3.88 22.2552 4.34 22.4749 4.6C22.7545 4.92 22.8743 5.32 22.8743 6C22.8743 6.84 22.7745 7.08 22.1753 7.7C21.7958 8.1 20.937 8.68 20.2779 9C19.6188 9.32 18.5003 9.72 16.4831 10.2L16.6029 9.54C16.6828 9.2 17.2021 7.78 17.7813 6.4Z"
        fill="#594CE9"
      />
      <path
        d="M4.71931 10.8C4.5795 10.3 4.39975 9.72 4.31986 9.52C4.23997 9.24 4.27991 9.16 4.45967 9.24C4.5795 9.32 5.23859 9.6 5.89769 9.86C6.55678 10.14 7.81505 10.52 8.69384 10.7C9.75238 10.92 11.2104 11.04 12.9879 11.04C14.7455 11.04 16.2434 10.92 17.282 10.7C18.1608 10.52 19.5189 10.1 20.2779 9.78C21.0568 9.48 21.6959 9.24 21.7359 9.26C21.7559 9.28 21.616 9.66 21.4363 10.1C21.1966 10.66 21.0968 11.48 21.0768 12.9C21.0768 14.36 21.1767 15.14 21.4363 15.8C21.636 16.3 21.7559 16.72 21.7359 16.74C21.6959 16.76 21.0568 16.52 20.2779 16.22C19.5189 15.9 18.1608 15.48 17.282 15.3C16.2235 15.06 14.7655 14.96 12.9879 14.96C11.2104 14.96 9.75238 15.06 8.69384 15.3C7.81505 15.48 6.47689 15.9 5.69796 16.22C4.93901 16.52 4.27991 16.76 4.25994 16.74C4.23997 16.72 4.39975 16.2 4.59947 15.6C4.83914 14.94 4.99892 13.94 4.99892 13.1C4.99892 12.34 4.87909 11.3 4.71931 10.8Z"
        fill="#594CE9"
      />
      <path
        d="M5.69796 17C6.35705 16.68 7.43557 16.3 8.07469 16.14C9.13323 15.88 9.27304 15.9 9.33296 16.18C9.39287 16.36 9.05334 17.44 8.59397 18.6C8.13461 19.76 7.53543 21.2 7.23584 21.8C6.79645 22.7 6.59672 22.9 6.15733 22.96C5.83777 22.98 5.29851 22.82 4.95898 22.62C4.59947 22.42 4.0003 21.92 3.66077 21.52C3.14148 20.96 3.00167 20.62 3.00167 20C3.00167 19.36 3.14148 19.04 3.76063 18.38C4.16008 17.94 5.03887 17.3 5.69796 17Z"
        fill="#594CE9"
      />
      <path
        d="M17.7813 19.6C17.2021 18.22 16.7028 16.84 16.6629 16.52L16.583 15.94L17.4817 16.06C17.981 16.14 18.9797 16.44 19.7386 16.74C20.6174 17.1 21.4163 17.62 22.0754 18.24C23.074 19.2 23.074 19.22 22.9342 20.16C22.8543 20.68 22.6346 21.28 22.4349 21.48C22.2352 21.68 21.7159 22.12 21.2765 22.44C20.8371 22.76 20.2379 23 19.9384 23C19.5788 23 19.2793 22.84 19.0995 22.56C18.9397 22.3 18.3406 20.98 17.7813 19.6Z"
        fill="#594CE9"
      />
    </svg>
  );
});

const Sambanova = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <path
        d="M23.9395 23H22.8288V9.38464C22.8288 6.5566 20.4901 4.11242 17.6039 4.11242H10.3219C7.43574 4.11242 5.10488 6.44692 5.10488 9.2828C5.10488 12.1108 7.43574 14.4454 10.3219 14.4454H11.0493C12.2695 14.4454 13.2707 15.4481 13.2707 16.6702C13.2707 17.8923 12.2695 18.8872 11.0493 18.8872H3.93945V17.7826H10.9946C11.6047 17.7826 12.1053 17.2812 12.1053 16.725C12.1053 16.114 11.6047 15.6674 10.9946 15.6674H10.2672C6.82565 15.6126 3.93945 12.7767 3.93945 9.2828C3.93945 5.78104 6.82565 3 10.3219 3H17.6587C21.1002 3 23.9395 5.94555 23.9395 9.38464V23Z"
        fill="#EE7624"
      />
      <path
        d="M11.1041 13.6069C12.6606 13.6617 14.1624 15.0562 14.1624 16.717C14.1624 18.3856 12.7701 19.827 11.0493 19.827H3.93945V20.9394H10.9946C13.3255 20.9394 15.2652 19.0515 15.2652 16.717C15.2652 16.1137 15.1557 15.5575 14.882 15.0013C14.6551 14.5 14.2719 13.9986 13.8808 13.6069C13.435 13.223 12.9344 12.941 12.379 12.7217C11.7142 12.5023 11.0493 12.5571 10.3219 12.5023C9.93085 12.5023 9.047 12.2751 8.54641 11.9461C8.04583 11.6092 7.65474 11.1627 7.43574 10.6692C7.26366 10.2226 7.15416 9.7761 7.15416 9.27473C7.15416 7.55127 8.54641 6.16466 10.2672 6.16466H17.5961C19.3168 6.16466 20.7091 7.66878 20.7091 9.32957V22.9919H21.8198V9.3844C21.8198 7.05773 19.9348 5.05225 17.5961 5.05225H10.3219C7.99108 5.05225 6.0513 6.94022 6.0513 9.27473C6.0513 9.88577 6.16081 10.442 6.43456 10.9982C6.66139 11.4996 6.9899 12.0009 7.43574 12.3848C7.82682 12.7765 8.38216 13.0507 8.88275 13.2779C9.1565 13.3875 9.43808 13.4424 9.76659 13.4972C10.5488 13.552 11.0493 13.6069 11.1041 13.6069Z"
        fill="#EE7624"
      />
      <path
        d="M10.9946 23H3.93945V21.8876H10.9946C13.8808 21.8876 16.2116 19.5531 16.2116 16.7172C16.2116 13.8892 13.8808 11.5546 10.9946 11.5546H10.2672C9.047 11.5546 8.04583 10.5519 8.04583 9.32981C8.04583 8.10772 9.047 7.10498 10.2672 7.10498H17.6039C18.8241 7.10498 19.8253 8.16256 19.8253 9.38465V22.9922H18.7146V9.38465C18.7146 8.78144 18.214 8.22523 17.6587 8.22523H10.3219C9.71184 8.22523 9.27383 8.7266 9.27383 9.27498C9.27383 9.83118 9.77442 10.3326 10.3845 10.3326H11.1041C14.6004 10.3326 17.4396 13.1606 17.4396 16.6075C17.3849 20.1641 14.4909 22.9922 10.9946 22.9922V23Z"
        fill="#EE7624"
      />
    </svg>
  );
});

const Nscale = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <rect
        x="2.43628"
        y="2.43652"
        width="21.1274"
        height="21.1274"
        rx="3.54011"
        fill="#F6F7F8"
      />
      <path
        d="M22 9.10907C22 8.12421 20.818 7.62981 20.1246 8.32459L10.6151 17.852C10.4793 17.9881 10.575 18.2215 10.7667 18.2215H12.1408C12.206 18.2215 12.2711 18.2165 12.3355 18.2066L14.4558 17.8806C15.7981 17.6743 17.1644 17.6827 18.5041 17.9056L20.2984 18.204C20.3679 18.2156 20.4382 18.2214 20.5086 18.2214H21.4747C21.7648 18.2214 22 17.9847 22 17.6927V9.10907Z"
        fill="#09090B"
      />
      <path
        opacity="0.6"
        d="M7.30146 18.2187C7.11013 18.2188 7.01423 17.986 7.14943 17.8497L13.7249 11.2215C14.1094 10.8339 14.7332 10.8337 15.118 11.221C15.5025 11.608 15.5025 12.2355 15.118 12.6226L9.85653 17.9185C9.66556 18.1107 9.40653 18.2187 9.13644 18.2187H7.30146Z"
        fill="#6B6B6D"
      />
      <path
        opacity="0.4"
        d="M4.51022 18.2196C4.05682 18.2196 3.82952 17.668 4.1498 17.345L8.14569 13.3149C8.53008 12.9272 9.15395 12.9269 9.53872 13.3142C9.92319 13.7012 9.92319 14.3286 9.53872 14.7156L6.35585 17.9193C6.16487 18.1116 5.90585 18.2196 5.63576 18.2196H4.51022Z"
        fill="#9D9D9D"
      />
    </svg>
  );
});

const Featherless = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <svg
        width="26"
        height="26"
        viewBox="0 0 26 26"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
      >
        <rect
          x="2.43628"
          y="2.43652"
          width="21.1274"
          height="21.1274"
          rx="3.54011"
          fill="#0C0A09"
        />
        <path
          d="M21.0962 6.7616C20.2483 6.2632 19.1029 6 17.7812 6C15.7596 6 13.5312 6.6139 11.5294 7.6821L11.5152 7.6772L11.5124 7.6919C10.9068 8.0167 10.3196 8.3786 9.7685 8.7825C6.52079 11.1632 5.61129 13.9884 6.37912 15.499C5.53833 16.8794 5.02125 18.3081 5 20C6.615 17.0369 7.584 14.6359 12.8455 10.5934C11.3424 10.9035 8.74425 12.3749 6.99608 14.6079C6.83104 13.3017 7.90275 11.1926 10.2898 9.4426C10.593 9.2214 10.9068 9.0142 11.2277 8.8175C10.9769 9.5672 11.0577 9.381 10.537 10.4324C11.3063 9.7317 11.812 9.2984 12.5721 8.0979C13.5368 7.63815 14.5536 7.29388 15.6009 7.0724C15.4323 7.6093 15.1122 8.5193 14.6787 9.2389C14.6787 9.2389 15.7787 9.0121 16.6882 9.0639C16.1917 9.591 15.744 10.1622 15.2907 10.746C14.6702 11.5454 14.0284 12.3714 13.206 13.1407C13.1069 13.2338 13.0127 13.3178 12.917 13.4046C11.6534 13.2877 10.8197 13.7427 10.0377 14.5456C10.6539 14.2691 11.4827 14.0416 12.0012 14.1788C11.0449 14.9299 9.53829 15.9197 8.30083 15.8378C8.06567 16.1822 8.05079 16.1927 7.79296 16.6078C9.80108 17.0894 12.3227 15.1252 13.8067 13.7357C14.6772 12.9209 15.3402 12.0676 15.9813 11.2437C17.3002 9.5448 18.4399 8.0776 20.968 7.5197L22 7.2922L21.0962 6.7616Z"
          fill="#FFE184"
        />
      </svg>
    </svg>
  );
});

const Cohere = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M9.48 14.92C10.0133 14.92 11.08 14.8933 12.5733 14.28C14.3067 13.56 17.72 12.28 20.2 10.9467C21.9333 10.0133 22.68 8.78667 22.68 7.13333C22.68 4.86667 20.84 3 18.5467 3H8.94667C5.66667 3 3 5.66667 3 8.94667C3 12.2267 5.50667 14.92 9.48 14.92Z"
        fill="#39594D"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M11.1066 19C11.1066 17.4 12.0666 15.9333 13.5599 15.32L16.5732 14.0666C19.6399 12.8133 22.9999 15.0533 22.9999 18.36C22.9999 20.92 20.9199 23 18.3599 23H15.0799C12.8932 23 11.1066 21.2133 11.1066 19Z"
        fill="#D18EE2"
      />
      <path
        d="M6.44 15.6934C4.54667 15.6934 3 17.24 3 19.1334V19.5867C3 21.4534 4.54667 23 6.44 23C8.33333 23 9.88 21.4534 9.88 19.56V19.1067C9.85333 17.24 8.33333 15.6934 6.44 15.6934Z"
        fill="#FF7759"
      />
    </svg>
  );
});

const Fal = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M16.5899 2.37891C16.9579 2.37891 17.2529 2.67812 17.2881 3.04443C17.6019 6.31174 20.2023 8.91191 23.4698 9.22569C23.8361 9.26089 24.1353 9.55582 24.1353 9.92378V16.0761C24.1353 16.4441 23.8361 16.739 23.4698 16.7742C20.2023 17.088 17.6019 19.6881 17.2881 22.9555C17.2529 23.3218 16.9579 23.621 16.5899 23.621H10.4373C10.0692 23.621 9.77432 23.3218 9.73912 22.9555C9.42534 19.6881 6.82494 17.088 3.5574 16.7742C3.19109 16.739 2.89185 16.4441 2.89185 16.0761V9.92378C2.89185 9.55582 3.19109 9.26089 3.55741 9.22569C6.82494 8.91191 9.42534 6.31174 9.73912 3.04443C9.77432 2.67812 10.0692 2.37891 10.4373 2.37891H16.5899ZM7.15714 12.982C7.15714 16.5163 10.0192 19.3814 13.5498 19.3814C17.0804 19.3814 19.9426 16.5163 19.9426 12.982C19.9426 9.44762 17.0804 6.58248 13.5498 6.58248C10.0192 6.58248 7.15714 9.44762 7.15714 12.982Z"
        fill="currentColor"
      />
    </svg>
  );
});

const Replicate = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <rect
        x="3.14136"
        y="2.43652"
        width="21.1274"
        height="21.1274"
        rx="3.54011"
        fill="url(#paint0_linear_171_78)"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M19.9161 7.72173V6.18848H7.49072V19.8116H9.21034V7.72173H19.9161ZM19.919 9.09575V10.629H12.4584V19.8109H10.7388V9.09575H19.919ZM19.9161 11.9922V13.5342H15.7008V19.8082H13.9811V11.9922H19.9161Z"
        fill="white"
      />
      <defs>
        <linearGradient
          id="paint0_linear_171_78"
          x1="22.9091"
          y1="3.17345"
          x2="4.19652"
          y2="22.4427"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#EBFF18" />
          <stop offset="0.5" stop-color="#EB40F0" />
          <stop offset="1" stop-color="#BE0000" />
        </linearGradient>
      </defs>
    </svg>
  );
});

const HuggingFace = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <rect
        x="3.34856"
        y="3.02654"
        width="19.9474"
        height="19.9474"
        rx="2.95009"
        fill="#FFD21E"
        stroke="#FFB41E"
        stroke-width="1.18004"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M7.69336 9.74609V16.9754H9.32329V13.9595H11.8181V16.9754H13.4591V9.74609H11.8181V12.5292H9.32329V9.74609H7.69336ZM15.1646 9.74609V16.9754H16.7945V14.1702H19.3004V12.7953H16.7945V11.121H19.7217V9.74609H15.1646Z"
        fill="#814D00"
      />
    </svg>
  );
});

const BlackForest = component$(() => {
  return (
    <svg
      class="w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 26 26"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M13.1146 5L22.5938 18.9541L20.7344 18.9687L13.1146 7.54511L6.55208 17.528H14.6458L16.1042 18.9687C16.1042 19.0468 4 18.9541 4 18.9541L13.1146 5ZM21.3906 9.46122C21.3979 9.47585 21.6969 9.95853 22.0615 10.5436C22.4188 11.1287 22.7615 11.6918 22.9583 12.0063H19.8229L20.2458 11.3262C20.2458 11.3262 20.8365 10.3827 21.026 10.0463C21.2229 9.70988 21.3833 9.44659 21.3906 9.46122Z"
        fill="currentColor"
      />
      <path
        d="M19.6305 18.9541H17.917L13.4326 12.0794H15.2555L19.6305 18.9541Z"
        fill="currentColor"
      />
      <path
        d="M13.224 15.9556H10.1979L11.6563 13.5787L13.224 15.9556Z"
        fill="currentColor"
      />
    </svg>
  );
});

const GenericModel = component$(() => {
  return (
    <svg
      class="w-4 h-4 text-indigo-500"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      focusable="false"
      role="img"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 24 24"
    >
      <path
        class="uim-quaternary"
        d="M20.23 7.24L12 12L3.77 7.24a1.98 1.98 0 0 1 .7-.71L11 2.76c.62-.35 1.38-.35 2 0l6.53 3.77c.29.173.531.418.7.71z"
        opacity=".25"
        fill="currentColor"
      ></path>
      <path
        class="uim-tertiary"
        d="M12 12v9.5a2.09 2.09 0 0 1-.91-.21L4.5 17.48a2.003 2.003 0 0 1-1-1.73v-7.5a2.06 2.06 0 0 1 .27-1.01L12 12z"
        opacity=".5"
        fill="currentColor"
      ></path>
      <path
        class="uim-primary"
        d="M20.5 8.25v7.5a2.003 2.003 0 0 1-1 1.73l-6.62 3.82c-.275.13-.576.198-.88.2V12l8.23-4.76c.175.308.268.656.27 1.01z"
        fill="currentColor"
      ></path>
    </svg>
  );
});

export const ExtraProviders = component$(
  ({ selected, providers }: { selected: string; providers: string[] }) => {
    if (providers.length <= 1) {
      return null;
    }

    const areProviderSupported = providers.every(
      (provider) =>
        SUPPORT_PROVIDERS[provider as keyof typeof SUPPORT_PROVIDERS],
    );

    const VISIBLE_PROVIDERS = 1;

    let visibleProviders = providers
      .filter((provider) => provider !== selected)
      .slice(0, VISIBLE_PROVIDERS);

    let extraCount = providers.length - VISIBLE_PROVIDERS;

    if (!areProviderSupported) {
      visibleProviders = [];

      extraCount = providers.length - 1;
    }

    return (
      <div class="flex items-center">
        <div class="ml-auto flex -space-x-2">
          {visibleProviders.map((provider) => (
            <div
              key={provider}
              class="w-6 h-6 flex items-center justify-center shadow bg-neutral-100 rounded-full"
            >
              <Provider name={provider} />
            </div>
          ))}

          {extraCount > 0 && (
            <div class="w-6 h-6 flex items-center justify-center text-xs font-mono bg-gray-100 text-gray-700 shadow rounded-full">
              +{extraCount}
            </div>
          )}
        </div>
      </div>
    );
  },
);

export const ModelImage = component$(
  ({ model }: { model: { picture?: string; id: string } }) => {
    if (!model?.picture) {
      return <GenericModel />;
    }

    return <img src={model.picture} alt={model.id} class="w-4 h-4" />;
  },
);

const SUPPORT_PROVIDERS = {
  novita: NovitaIcon,
  nebius: NebiusIcon,
  cerebras: Cerebras,
  'fireworks-ai': Fireworks,
  together: Together,
  groq: Groq,
  hyperbolic: Hyperbolic,
  sambanova: Sambanova,
  nscale: Nscale,
  'featherless-ai': Featherless,
  cohere: Cohere,
  'fal-ai': Fal,
  replicate: Replicate,
  'hf-inference': HuggingFace,
  'black-forest': BlackForest,
};
